<template>
	<view>
		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/cljbxx.png" class="titleImg" mode="aspectFit"></image>
				<view class="">
					车辆报告
				</view>
			</view>
			<view class="">
				<u-table padding='24rpx' border-color="#d8d8d8" font-size="28" color="color: #2C2C2C;">
					<u-tr class="u-tr">
						<u-td class="u-td aaa">品牌型号</u-td>
						<u-td class="u-td">{{carInfo.brand_name}}</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td aaa">款型</u-td>
						<u-td class="u-td">{{carInfo.series_name}}</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td aaa">VIN</u-td>
						<u-td class="u-td">{{carInfo.vin}}</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td aaa">生产日期</u-td>
						<u-td class="u-td">{{carInfo.report_time}}</u-td>
					</u-tr>
				</u-table>
				<!-- <view class="" style="height: 80rpx;line-height: 80rpx;">
					<text class="carBaseName">表显里程</text>
					<text>12035公里</text>
				</view> -->
			</view>
		</view>
		<!-- - -->
		<!-- 关键指标评估 -->
		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/gjzbpg.png" class="titleImg" mode="aspectFit"></image>
				<view class="">
					关键指标评估
				</view>
			</view>
			<view class="">
				<view class="table" style="padding-top: 0;">
					<u-table padding='24rpx' border-color="#d8d8d8" font-size="28" color="color: #2C2C2C;">
						<u-tr class="u-tr">
							<u-th width="40%" class="u-td nameTd">指标</u-th>
							<u-th class="u-td deId">评估数据</u-th>
							<u-th class="u-td deId">新车初始数据</u-th>
						</u-tr>
						<u-tr class="u-tr" v-for="item in indexEvaluations">
							<u-td width="40%" class="u-td nameTd">{{item.index}}</u-td>
							<u-td class="u-td deId">{{item.evaluations}}</u-td>
							<u-td class="u-td deId">{{item.newCarData}}</u-td>
						</u-tr>
					</u-table>
				</view>
			</view>
		</view>
		<!-- - -->

		<!-- 综合车况评级 -->
		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/zhckpg.png" class="titleImg" mode="aspectFit"></image>
				综合车况评级
			<!-- 	<view class="report_tit_r" style="color: #888;">
					评级规则
				</view> -->
			</view>
			<view class="" style="padding: 40rpx 85rpx;">
				<!-- <u-steps :list="numList" active-color="#FD7E6E" :current="accidentGrade" mode="dot"></u-steps> -->
				<view class="jdtList">
					<view>
						<view :class="accidentGrade==1?'act':''"></view>
						<text :class="accidentGrade==1?'act1':''">优</text>
					</view>
					<view class="xian"></view>
					<view>
						<view :class="accidentGrade==2?'act':''"></view>
						<text :class="accidentGrade==2?'act1':''">良</text>
						
					</view>
					<view class="xian"></view>
					<view>
						<view :class="accidentGrade==3?'act':''"></view>
						<text :class="accidentGrade==3?'act1':''">中</text>
					</view>
					<view class="xian"></view>
					<view>
						<view :class="accidentGrade==4?'act':''"></view>
						<text :class="accidentGrade==4?'act1':''">差</text>
					</view>
				</view>
			</view>
		</view>

		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/ybwxls.png" class="titleImg" mode="aspectFit"></image>维修信息
				<!-- <view class="report_tit_r" style="color: #888;">
					规则说明
				</view> -->
			</view>
			<!-- <view class="repair">
				<view class="repair_list" v-for="(item,index) in repairHistory" :key="index">

					<view class="repair_num">
						{{index+1}}
					</view>
					<view class="repair_name">
						{{item.compName}}
					</view>
					<view class="repair_desc">
						{{item.repairItems}}
					</view>


				</view>
			</view> -->
			
			<u-table padding='24rpx' border-color="#d8d8d8" font-size="28" color="color: #2C2C2C;">
				<u-tr class="u-tr">
					<u-th class="u-td">受损部位</u-th>
					<u-th class="u-td">维修内容</u-th>
				</u-tr>
				<u-tr class="u-tr">
					<u-td class="u-td">前保险杆</u-td>
					<u-td class="u-td">补漆</u-td>
				</u-tr>
				<u-tr class="u-tr">
					<u-td class="u-td">后保险杆</u-td>
					<u-td class="u-td">补漆</u-td>
				</u-tr>
			</u-table>
			<view  style="margin-top: 40rpx;">
				<u-table padding='24rpx' border-color="#d8d8d8" font-size="28" color="color: #2C2C2C;">
					<view v-for="(item,index) in mtnceRecord" :key="index">
						<u-tr class="u-tr">
							<u-th class="u-td">时间：{{item.date}}</u-th>
							<u-th class="u-td">里程：{{item.mile}}公里</u-th>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td td1">
								<view>项目：{{item.detail}}</view>
								<view>材料：{{item.other}}</view>
							</u-td>
						</u-tr>
					</view>
				</u-table>
			</view>
		</view>


		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/jllcfx.png" class="titleImg" mode="aspectFit"></image>
				里程记录分析

				<!-- <view class="report_tit_r" style="color: #888;">
					规则说明
				</view> -->
			</view>
			<view class="" style="padding:0 0 32rpx 0;font-size: 28rpx;">
				<view class="sjyc"><text class="actives">0项异常</text>,该车里程记录没有发现异常
				</view>
			</view>
			<view class="">
				<u-table  padding='20rpx' font-size="30" color="#2c2c2c">
					<u-tr>
						<u-th>时间</u-th>
						<u-th>里程（公里）</u-th>
					</u-tr>
					<u-tr v-for="(item,index) in mileageRecords" :key="index">
						<u-td>{{item.date}}</u-td>
						<u-td>{{item.mile}}</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				accidentGrade:'1',
				orderNo: "",
				carInfo: {
					brand_name: "小鹏汽车",
					engine_no: "",
					report_time: "2021-08-13",
					series_name: "四驱高性能智尊版纯电动",
					vin: "L1NSPGHB3LA000070",
				},
				indexEvaluations: [{
						evaluations: "-",
						newCarData: "-",
						index: "价格"
					},
					{
						evaluations: "-",
						newCarData: "-",
						index: "电池剩余寿命"
					},
					{
						evaluations: "-",
						newCarData: "-",
						index: "持续里程（常规/夏季/冬季）"
					},
					{
						evaluations: "-",
						newCarData: "-",
						index: "快充时间"
					},
					{
						evaluations: "-",
						newCarData: "-",
						index: "0-100加速"
					},
					{
						evaluations: "-",
						newCarData: "-",
						index: "整车质保"
					},
					{
						evaluations: "-",
						newCarData: "-",
						index: "三电系统质保"
					},
				],
				mileageRecords: [{
						date: "2021-07",
						mile: "32447"
					},
					{
						date: "2021-03",
						mile: "21145"
					},
					{
						date: "2020-03",
						mile: "21117"
					},
					{
						date: "2021-02",
						mile: "18679"
					},
					{
						date: "2021-01",
						mile: "16994"
					},
					{
						date: "2021-01",
						mile: "16856"
					},
					{
						date: "2021-01",
						mile: "16769"
					},
					{
						date: "2020-12",
						mile: "15986"
					},
					{
						date: "2020-11",
						mile: "15640"
					},
					{
						date: "2020-11",
						mile: "15220"
					},
				],
				mtnceRecord: [{
						date: "2021-07",
						other: "长城YC-2有机防冻液：2.00",
						mile: 32447,
						detail: "进入或退出验证模式；(更换) 动力电池总成的拆装",
						type: "无"
					},
					{
						date: "2021-03",
						other: "",
						mile: 21145,
						detail: "更换三角摄像机线束连接器",
						type: "无"
					},
					{
						date: "2021-03",
						other: "",
						detail: "每公里汽车保养",
						mile: 21117
					},
					{
						date: "2021-02",
						other: "右外后视镜总成(电动折叠高配) -高亮黑(6A):1.00;左外后视镜总成(电动折叠高配) -高亮黑(6A):1.00；侧后摄像头:2.00",
						detail: "360度全景图像校准；三个摄像头和左右前摄像头的校准；软件升级；更换或拆解左右后摄像头；更换或分解右外后视镜总成；更换或分解做外后视镜总成",
						mile: 18679
					},
					{
						date: "2021-01",
						other: "四轮定位:1.00;朝阳215 50 17:1.00;下支臂R:1.00;钢圈-17寸:1.00",
						detail: "摄像头驱动校准(仅包括单侧或多侧前、侧后和后视摄像机)；软件升级材料",
						mile: 16994
					},
					{
						date: "2021-01",
						other: "四轮定位:1.00;朝阳215 50 17:1.00;下支臂R:1.00;钢圈-17寸:1.00",
						detail: "检测系统升级",
						mile: 16856
					},
					{
						date: "2021-01",
						other: "右后轮导流板:1.00",
						detail: "更换右后导流板",
						mile: 16769
					},
					{
						date: "2020-12",
						other: "厂名字牌总成:1.00；智能蓝牙泊车钥匙总成：1.00",
						detail: "更换或拆卸海马总成；智能钥匙匹配",
						mile: 15986
					},
					{
						date: "2020-01",
						other: "侧后摄像头：2.00；六角法兰面螺栓和垫圈组合键M8×45:4.00；压缩机：1.00",
						detail: "360度全景图像校准；三个摄像头和左右前摄像头的校准；软件升级；更换或拆解左右后摄像头；更换或分解右外后视镜总成；更换或分解左外后视镜总成；导电弹簧线安装；更换或拆卸压缩机支架",
						mile: 15640
					}
				],
				repairHistory: [{
					repairItems: "喷漆修复",
					compName: "右前叶子板"
				}],


				numList: [{
					name: '优'
				}, {
					name: '良'
				}, {
					name: '中'
				}, {
					name: '差'
				}, ],

				form: {},

				// 检查结果及风险提示

			};
		},
		methods: {
			getzhckReport() {
				let data = {
					orderNo: this.orderNo
				}
				API.getzhckReport(data).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.carInfo = res.data.carInfo;
						this.indexEvaluations = res.data.indexEvaluations;
						this.mileageRecords = res.data.mileageRecords;
						this.mtnceRecord = res.data.mtnceRecord;
						this.repairHistory = res.data.repairHistory;
						if (res.data.accidentGrade == 'A') {
							this.accidentGrade = 1
						}
						if (res.data.accidentGrade == 'B') {
							this.accidentGrade = 2
						}
						if (res.data.accidentGrade == 'C') {
							this.accidentGrade = 3
						}
						if (res.data.accidentGrade == 'D') {
							this.accidentGrade = 4
						}
						// this.orderNo = res.data.orderNo;
						// uni.navigateTo({
						// 	url:"./carReportDetail?orderNo=" + this.orderNo
						// })
					}
				})
			},
		},
	}
</script>
<style scoped lang="scss">
	.aaa{
		background: #F4F6F8 !important;
		color: #2C2C2C;
		font-weight: 550;
	}
	.jdtList{
		display: flex;
		justify-content: space-between;
		view{
			view{
				width: 15rpx;
				height: 15rpx;
				background: #D8D8D8;
				border-radius: 50%;
				margin: auto;
				margin-bottom: 10rpx;
			}
		}
	}
	.act{
		width: 20rpx !important;
		height: 20rpx !important;
		background: #FD7E6E !important;
	}
	.act1{
		color: #FD7E6E !important;
	}
	.aa{
		font-family: PingFangSC-Regular;
		font-size: 30rpx;
		color: #2C2C2C;
	}
	.xian{
		width: 100rpx;
		height: 2rpx;
		margin-top: 10rpx;
		background: #D8D8D8;
	}
	.reportbox {
		padding: $uni-widthspace;
		box-sizing: border-box;
		// margin: $uni-widthspace $uni-widthspace;
		    margin: 5rpx 0;
		// border-radius: 10rpx;
		    font-size: 30rpx;
		overflow: hidden;

		.report_tit {
			font-weight: bold;
			position: relative;
			// margin-bottom: 12rpx;
			    margin: 30rpx 0;

			.report_tit_r {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.report_bigimg {
			width: 100%;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}

	/* 时间轴 */
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 30rpx;
	}

	.u-order-desc {
		margin-bottom: 6rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.title {
		color: #002B56;
		font-size: 46rpx;
		font-weight: bold;
		padding-left: $uni-widthspace;
		box-sizing: border-box;

	}

	.titleImg {
		width: 38rpx;
		height: 40rpx;
		padding-right: 20rpx;
	}

	.carBaseName {
		display: inline-block;
		width: 200rpx;
		font-family: PingFangSC-Medium;
		font-size: 30rpx;
		color: #2C2C2C;
	}

	.batteryBox {
		width: 50%;
		line-height: 52rpx;
	}

	.dataBgColDark {
		background-color: #002A58;
		height: 50rpx;
		line-height: 50rpx;
		color: #fff;
		text-align: center;
	}

	.dataBgCol {
		background-color: #E5E5E5;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.repair {
		width: 100%;
		margin-bottom: 10rpx;

		.repair_list {
			width: 100%;
			position: relative;
			display: flex;
			align-items: center;
			padding: 15rpx 0;

			.repair_num {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background-color: #002a58;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				margin-right: 10rpx;
				margin-left: 6rpx;
			}

			.repair_desc {
				position: absolute;
				right: 0;
				top: 10rpx;
				color: #002a58;
			}
		}
	}
	.sjyc{
		background: #FFF6EF;
		width: 100%;
		height: 62rpx;
		text-align: center;
		line-height: 62rpx;
	}
	.actives{
		font-family: PingFangSC-Medium;
		font-size: 28rpx;
		color: #F17210;
	}
	
	.td1{
		view:nth-child(1){
			text-align: left;
		}
		view:nth-child(2){
			text-align: left;
			margin-top: 16rpx;
		}
	}
</style>
